<template>
    <div class="nav-container">
        <ul class="nav-menu">
            <li
                v-for="menu in menus"
                :key="menu.name"
                :class="{ 'has-submenu': menu.children.length }"
                @mousemove="currentMenu = menu.name"
            >
                <a :href="`/${menu.name}`"
                    >{{ menu.label }}
                    <i
                        v-if="menu.children.length"
                        :class="['el-icon-arrow-down', { 'none-animation': currentMenu !== menu.name }]"
                    ></i
                ></a>
                <ul class="submenu" v-if="menu.children.length">
                    <li v-for="childMenu in menu.children" :key="childMenu.name">
                        <template v-if="menu.name === 'product'">
                            <a :href="`/products/${childMenu.name}`">{{ childMenu.label }}</a>
                        </template>
                        <template v-else>
                            <a :href="`/${menu.name}/${childMenu.name}`">{{ childMenu.label }}</a>
                        </template>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</template>
<script setup>
import { ref } from 'vue'
const currentMenu = ref('')
const menus = ref([
    {
        name: 'home',
        label: '首页',
        children: [],
    },
    {
        name: 'product',
        label: '产品中心',
        children: [
            {
                name: 'impurity',
                label: '杂质对照品',
            },
            {
                name: 'isotope',
                label: '稳定同位元素',
            },
            {
                name: 'api',
                label: 'API',
            },
        ],
    },
    {
        name: 'synthesis',
        label: '定制合成',
        children: [
            {
                name: 'process',
                label: '定制流程',
            },
            {
                name: 'variety',
                label: '优势品种',
            },
        ],
    },
    {
        name: 'information',
        label: '资讯中心',
        children: [
            {
                name: 'news',
                label: '新闻中心',
            },
            {
                name: 'activity',
                label: '活动中心',
            },
        ],
    },
    {
        name: 'about',
        label: '关于我们',
        children: [
            {
                name: 'aboutus',
                label: '公司简介',
            },
            {
                name: 'team',
                label: '技术团队',
            },
            {
                name: 'achievement',
                label: '研发成果',
            },
        ],
    },
    {
        name: 'contact',
        label: '联系我们',
        children: [],
    },
])
</script>
<style lang="scss" scoped>
.none-animation {
    animation: none !important;
}
.nav-container {
    width: 100%;
    height: 60px;
    border-bottom: 1px solid #fafafa;
}

.nav-menu {
    width: 1200px;
    height: 60px;
    margin: 0 auto;
    list-style: none;
}

.nav-menu > li {
    float: left;
    height: 60px;
    width: 200px;
    position: relative;
}

.nav-menu > li > a {
    display: block;
    height: 60px;
    line-height: 60px;
    padding: 0 20px;
    color: #333;
    text-decoration: none;
    font-size: 16px;
    font-weight: bold;
}

/* 下拉箭头 */
.nav-menu li.has-submenu > i {
    margin-left: 5px;
    font-size: 12px;
    transition: transform 1s;
}
@keyframes rotateAnimation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(180deg);
    }
}

.nav-menu li.has-submenu:hover i.el-icon-arrow-down {
    animation: rotateAnimation 1s 1;
    transform: rotate(180deg);
}

@keyframes rotateReversesAnimation {
    0% {
        transform: rotate(180deg);
    }
    100% {
        transform: rotate(0deg);
    }
}
.nav-menu li.has-submenu i.el-icon-arrow-down {
    animation: rotateReversesAnimation 1s 1;
    transform: rotate(0deg);
}

.submenu {
    display: none;
    position: absolute;
    top: 60px;
    left: 0;
    background-color: #fff;
    border-bottom: 2px solid #00a7e1;
    width: 150px;
    padding: 0 20px;
    list-style: none;
    z-index: 100;
}

.nav-menu li:hover .submenu {
    display: block;
}
.submenu li {
    width: 100%;
}

.submenu li a {
    display: block;
    padding: 10px 0;
    color: #444;
    text-decoration: none;
    border-bottom: 1px solid #fafafa;
}

.nav-menu > li:hover > a {
    &:hover {
        color: #00a7e1;
    }
}

.submenu li a:hover {
    color: #00a7e1;
    transform: translateX(5px);
}

@media screen and (max-width: 768px) {
    .nav-menu {
        width: 100%;
    }

    .nav-menu > li {
        width: 100%;
        float: none;
    }

    .submenu {
        position: static;
        width: 100%;
    }

    .submenu li a {
        padding-left: 40px;
    }
}
</style>
